<template>
  <div class="domain-userinfo" v-loading.fullscreen.lock="fullscreenLoading">
    <p class="page-title">
      <i class="el-icon-monitor"></i> 个人信息
    </p>
    <div class="userinfo-form">
      <el-form status-icon ref="userinfo" :rules="rules" :model="userinfo" label-width="90px">
        <el-form-item label="用户ID：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.id" :disabled="true"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="昵称：" prop="nickName">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.nickName"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.email" :disabled="true"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-row :style="'width:'+screenHeigth+''">
            <el-radio-group v-model="userinfo.sex" size="medium">
              <el-radio border :label="1">男</el-radio>
              <el-radio border :label="2">女</el-radio>
            </el-radio-group>
          </el-row>
        </el-form-item>
        <el-form-item label="注册ip：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.registIp" :disabled="true"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="注册设备：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.registDevice" :disabled="true"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="个性签名：" prop="perSign">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input type="textarea" :rows="4" :maxlength="50" show-word-limit v-model="userinfo.perSign"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="注册时间：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.registTime" :disabled="true"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="用户等级：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.level" :disabled="true"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="大V等级：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-input v-model="userinfo.bigV" :disabled="true"></el-input>
          </el-row>
        </el-form-item>
        <el-form-item label="头像：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-upload
              :multiple="false"
              :limit="1"
              :action="serverUrl"
              list-type="picture-card"
              :on-remove="handleAvatarRemove"
              :on-success="UploadAvatarSuccess"
              :on-error="uplodaAvatarError"
              :with-credentials="true"
              ref="avatarUpload"
              :data="{type:3}"
            >
              <img
                :src="userinfo.avatar"
                width="100%"
                height="100%"
              />
            </el-upload>
          </el-row>
        </el-form-item>
        <el-form-item label="主页背景：">
          <el-row :style="'width:'+screenHeigth+''">
            <el-upload
              :multiple="false"
              :limit="1"
              :action="serverUrl"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-success="UploadBackSuccess"
              :on-error="uplodaBackError"
              :before-upload="beforeBackUpload"
              :with-credentials="true"
              ref="BackUpload"
              :data="{type:4}"
            >
              <img
                :src="userinfo.backImg"
                width="100%"
                height="100%"
              />
            </el-upload>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="publish-button">
        <el-button type="success" @click="submitForm('userinfo')">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { fetch,post } from "@/utils/httpRequest";
export default {
  data() {
    var validNickName=(rule,value,callback)=>{
      let reg=/^([\u4e00-\u9fa5]|[a-zA-Z0-9]){1,10}$/
      if(!reg.test(value)){
          callback(new Error('昵称必须是由1-10位数字和中文以及字母组合'))
      }else{
          callback()
      } 
    };
    return {
      fullscreenLoading: true,
      screenHeigth:
        document.body.clientWidth < 500
          ? document.body.clientWidth - 110 + "px"
          : "100%",
      serverUrl: this.http.host + this.http.blog_article.article.image_upload, // 这里写你要上传的图片服务器地址
      userinfo: {
        backcolor: "#409EFF"
      },
      rules: {
          nickName: [  
            { required: true, message: '请输入昵称', trigger: 'blur' },
            { validator:validNickName,trigger:'blur'}
          ],
          sex:[
              { required: true, message: '请选择性别', trigger: 'change' }
          ]
        },
    };
  },
  created: function() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo(){
        fetch(this.http.account.getUserInfo,{}).then((response)=>{
          if(response.success){
            this.userinfo=response.data;
          }
          this.fullscreenLoading=false;
        })
    },
    handleRemove() {
      document.querySelector(
        ".el-upload--picture-card:nth-child(1)"
      ).style.display = "inline-block";
    },
    UploadBackSuccess(res, file) {
      if (res.success === false) {
        this.$refs.BackUpload.clearFiles();
        this.$notify.error({
          title: "通知",
          message: res.message
        });
      } else {
        this.userinfo.backImg = res.data.accessPath;
        document.querySelector(
          ".el-upload--picture-card:nth-child(1)"
        ).style.display = "none";
      }
    },
    uplodaBackError() {
      document.querySelector(
        ".el-upload--picture-card:nth-child(1)"
      ).style.display = "inline-block";
      this.$notify.error({
        title: "通知",
        message: "封面上传失败"
      });
    },
    //图片上传格式限制
    beforeBackUpload(file) {
      var _this = this;
      if (file.type.indexOf("image") === -1) {
        _this.$notify.error({
          title: "通知",
          message: "文件格式错误"
        });
        return false;
      }
      let img = new Image();
      let _URL = window.URL || window.webkitURL;
      img.src = _URL.createObjectURL(file);
      img.onload = function() {
        let valid = img.width === 1200 && img.height === 220;
        if (!valid || file.size / 1024 > 1024) {
          _this.$notify.error({
            title: "通知",
            message: "主页背景格式必须是1200*220!并且大小不能超过1MB!"
          });
        }
        return valid;
      };
      return true;
    },
    handleAvatarRemove() {
        document.querySelector(".el-upload--picture-card:nth-child(2)").style.display = "inline-block";
    },
    UploadAvatarSuccess(res, file) {
        if (res.success === false) {
        this.$refs.avatarUpload.clearFiles();
        this.$notify.error({
          title: "通知",
          message: res.message
        });
      } else {
        this.userinfo.avatar = res.data.accessPath;
        document.querySelector(".el-upload--picture-card:nth-child(2)").style.display = "none";
      }
    },
    uplodaAvatarError() {
        document.querySelector(".el-upload--picture-card:nth-child(2)").style.display = "inline-block";
        this.$notify.error({
            title: "通知",
            message: "封面上传失败"
        });
    },
    submitForm(from) {
      this.$refs[from].validate(valid => {
        if (valid) {
          //修改个人信息
          this.modifyInfo(this.userinfo);
        } else {
          return false;
        }
      });
    },
    modifyInfo(userinfo){
      if(userinfo.perSign===""){
        userinfo.perSign="这个人很懒,什么也没留下!"
      }
      post(this.http.account.modifyUserInfo,userinfo).then((response)=>{
        if(response.success){
          this.$notify.success({
            title: "通知",
            message: response.message
          });
        }
      })
    }
  }
};
</script>

<style scoped>
.publish-button {
  text-align: center;
}
.userinfo-form {
  margin: 10px;
}
.domain-userinfo {
  width: 100%;
  height: 100%;
}
</style>